<script setup>
import nav from "@/assets/img/nav.png"
import nav1 from "@/assets/img/nav1.png"
import nav2 from "@/assets/img/nav2.png"
import nav3 from "@/assets/img/nav3.png"
import nav4 from "@/assets/img/nav4.png"
import nav5 from "@/assets/img/nav5.png"
import nav6 from "@/assets/img/nav6.png"
import {useUserInfoStore} from "@/stores/userInfo.js";

import {ref} from "vue";
import {showModal, toast} from "@/composables/utils.js";
import {logout} from "@/api/manager.js";
import { useRouter} from "vue-router";
const router = useRouter();
const title = ref('顶部');

const tabs = ref([
  {
    name:'教研'
  },{
    name:'学员'
  },{
    name:'教务'
  },{
    name:'赛考'
  }
])

const navs = ref([
  {
    name:'报名',
    img:nav1
  },{
    name:'钱包充值',
    img:nav
  },{
    name:'排课',
    img:nav2
  }, {
    name:'补课',
    img:nav3
  },{
    name:'讲台',
    img:nav4
},{
    name:'课评',
    img:nav5
  },{
    name:'转/退课',
    img:nav6
  }
])

const drop_contents = ref([
  {
    value:'课程管理',
  },{
    value:'课程素材',
  }
])
const drop_contents1 = ref([
  {
    value:'学员管理',
  },{
    value:'学员报名',
  },{
    value:'电子钱包',
  },{
    value:'学员异动',
  },{
    value:'学员导入',
  }
])
const drop_contents2 = ref([
  {
    value:'教学服务',
  },{
    value:'班级课次',
  },{
    value:'课消课评',
  },{
    value:'售卖课程',
  }
])
const drop_contents3 = ref([
  {
    value:'题库资源',
  },{
    value:'报考中心',
  },{
    value:'批阅中心',
  }
])
const store = useUserInfoStore()
function logouty() {

  showModal("是否要推出登录？").then(res => {
    logout().finally(() => {
      //清除当前用户状态
      store.logouts()
      //跳转回登录页
      router.push('/login')
      //提示退出登录成功
      toast("退出登录成功")
    })
    console.log("logout")
  })
}
</script>

<template>
  <div class="home">
    <div class="top">
      <div class="left"></div>
      <div class="middle">
        <nav class="nav">
          <ul>
            <li v-for="(tab,index) in tabs">
              <div class="dropdown">
              <a href="home.vue">{{tab.name}}</a>

                <div v-if="index === 0" class="dropdown-content">
                  <a v-for="content in drop_contents">
                    {{content.value}}
                  </a>
                </div>
                <div v-else-if="index === 1" class="dropdown-content">
                  <a v-for="content in drop_contents1">
                    {{content.value}}
                  </a>
                </div>
                <div v-else-if="index === 2" class="dropdown-content">
                  <a v-for="content in drop_contents2">
                    {{content.value}}
                  </a>
                </div>
                <div v-else-if="index === 3" class="dropdown-content">
                  <a v-for="content in drop_contents3">
                    {{content.value}}
                  </a>
                </div>
              </div>
            </li>
          </ul>
        </nav>
      </div>
      <div class="right"></div>
    </div>

    <div class="second-top">
      <nav>
        <ul>
          <li v-for="nav in navs">
            <a href="home.vue">
              <img v-bind:src="nav.img" alt="">
              <p>{{nav.name}}</p>
             </a>
          </li>
        </ul>
      </nav>
    </div>
    <div>
      {{ store.user }}
      <el-button @click="logouty">退出登录</el-button>
    </div>

  </div>
</template>

<style scoped>
.home {
  height: 100vh;
  width: 100%;
}

.top{
  display: flex;
  width: 100%;
  height: 6vh;
}

.second-top{
  display: flex;
  width: 100%;
  height: 10vh;
  background-color: whitesmoke;
  margin-top:10px;
  padding: 5px;
}

.left {
    display: flex;
    width: 15vw;
    background-color: #5e5ec1;
    padding: 0.4rem;
}

.middle{
  position: relative;
  display: flex;
  width: 70vw;
  background-color: #c8c8dd;

}

.middle nav > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
  padding-left: 0;
}

.middle nav > ul > li {
  color: #6060bc;
  margin: 0 0.3rem;
  padding: 0.2rem;
  display: block;
}

a{
  text-decoration: none;
}

.dropdown{
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 15px;
  text-align: center;

}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: #f1f1f1;
  border-radius: 1rem;
}

.dropdown:hover .dropdown-content {
  display: block;
  cursor: pointer;

}

.second-top nav > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
  padding-left: 0;
}
.second-top nav > ul > li{
  display: block;
  color: #6060bc;
  margin: 0 0.5rem;
  padding: 0.2rem;
}


.second-top img{
  display: flex;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: border 0.15s, box-shadow 0.15s;
}

.second-top p{
  text-align: center;
}
.second-top a:hover{
  color: pink;
}

.second-top a:hover img{
  border: 3px solid #d3bbbb;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}

li > a{
  text-decoration: none;
}
.right{
  background-color: aquamarine;
  width: 20vw;
}

</style>